<!--
 * @Date: 2022-05-24 16:49:07
 * @Author: 陶子
 * @LastEditTime: 2023-06-14 11:05:47
 * @FilePath: \jk_one-stop_pc\src\views\bigView\pubHeader.vue
 * @pageName: 这是--(大屏公共头部)--页面
-->
<template>
  <div>
    <div class="topBig">
      <div>
        <div class="topBox">
          <div class="topLeft">
            <div class="topLeftSon">
              <img src="@/assets/jkmes.png" alt="" srcset="" />
              <span> 即刻MES </span>
              <a-dropdown style="margin-right: 20px">
                <span @click="(e) => e.preventDefault()">
                  大屏切换
                  <a-icon type="down" />
                </span>
                <a-menu slot="overlay">
                  <a-menu-item v-for="item in bigViewList" :key="item.id">
                    <span @click="goBigView(item)">{{ item.label }}</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
          <div class="topCenter">
            <div class="topCenterText">{{ bigViewName }}</div>
            <!-- <dv-decoration-5 class="titleBottom" style="width: 30vw" /> -->
          </div>
          <div class="topRight" style="width: 3.8rem">
            <div class="topRightSon">
              {{ times }}
              <a-icon
                type="fullscreen"
                style="font-size: 0.5rem; margin-left: 0.1rem; cursor: pointer"
                :title="screenTitle"
                @click="fullscreen"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { listAllByCombo } from '@/api/productOrder'
import Vue from 'vue'
export default {
  components: {},
  props: [],
  data() {
    return {
      bigViewName: '',
      viewType: '',
      bigViewList: [],
      times: '',
      setTimer: null,
      screenTitle: '点击全屏',
    }
  },
  created() {
    let currentToken = this.$route.query.token || this.$store.state.user.token
    Vue.ls.set(ACCESS_TOKEN, currentToken, 7 * 24 * 60 * 60 * 1000)
    this.bigViewName = this.$route.meta.title
    this.viewType = this.$route.query.bigViewName
    this.getListData()
    this.getTime()
  },
  beforeDestroy() {
    clearInterval(this.setTimer)
  },
  methods: {
    // 全屏展示
    fullscreen() {
      var el = document.documentElement
      var isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      )
      if (isFull) {
        this.exitFullscreen()
        this.screenTitle = '点击全屏'
      } else {
        this.screenTitle = '点击或按Esc退出全屏'
        el.requestFullscreen || el.mozRequestFullScreen || el.webkitRequestFullscreen || el.msRequestFullScreen
          ? el.requestFullscreen() ||
            el.mozRequestFullScreen() ||
            el.webkitRequestFullscreen() ||
            el.msRequestFullscreen()
          : null
      }
    },
    // 退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    getListData() {
      //应该是接口请求，现在只有两个大屏，前端写死
      this.bigViewList = [
        {
          path: '/productionView',
          label: '生产看板',
        },
        {
          path: '/ticketsProcessView',
          label: '生产进度看板',
        },
      ]
      // listAllByCombo().then((res) => {
      //   if (res.code == 200) {
      //     this.bigViewList = res.result
      //   } else {
      //     this.$antdMessage.error(res.message)
      //   }
      // })
    },
    goBigView(item) {
      if (this.viewType != item.label) {
        let token = this.$ls.get(ACCESS_TOKEN)
        let obj = {
          bigViewName: item.label,
          token,
        }
        this.$router.replace({ path: item.path, query: obj })
      }
    },
    getTime() {
      this.setTimer = setInterval(() => {
        let myDate = new Date()
        let year = myDate.getFullYear()
        let month = myDate.getMonth() + 1
        let date = myDate.getDate()
        let hours = myDate.getHours()
        let minutes = myDate.getMinutes()
        let seconds = myDate.getSeconds()
        month = this.check(month)
        date = this.check(date)
        hours = this.check(hours)
        minutes = this.check(minutes)
        seconds = this.check(seconds)
        this.times = hours + ':' + minutes + ':' + seconds + '\xa0\xa0\xa0' + year + '年' + month + '月' + date + '日'
      }, 1000)
    },
    //不够两位补充 0
    check(i) {
      let num
      i < 10 ? (num = '0' + i) : (num = i)
      return num
    },
  },
}
</script>

<style scoped lang="less">
.topBig {
  margin-bottom: 0.13rem;
  .topBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('~@/assets/img/pubHeader.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    height: 0.93rem;
    box-sizing: border-box;
    padding: 0 0.25rem;
    .topLeft {
      flex: 3;
      // display: flex;
      font-size: 0.2rem;
      height: 100%;
      color: rgba(255, 255, 255, 0.85);
      .topLeftSon {
        height: 60%;
        display: flex;
        align-items: center;
        text-shadow: 0 0 0.1rem #fff, 0 0 0.02rem #fff, 0 0 0 #fff, 0 0 0 #fff;
        img {
          height: 70%;
          width: auto;
          margin-right: 10px;
        }
      }
    }
    .topCenter {
      flex: 2;
      display: flex;
      flex-direction: column;
      font-size: 0.42rem;
      height: 100%;
      color: #fff;
      position: relative;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      .topCenterText {
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 0 0 0.1rem #fff, 0 0 0.02rem #fff, 0 0 0 #fff, 0 0 0 #fff;
      }
    }
    .topRight {
      flex: 3;
      display: flex;
      justify-content: flex-end;
      font-size: 0.2rem;
      width: 5.2rem;
      font-size: 0.2rem;
      color: rgba(255, 255, 255, 0.85);
      height: 100%;
      .topRightSon {
        height: 60%;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
